import { Component } from 'react'
import { connect } from 'react-redux'
import { View } from '@tarojs/components'

import './index.less'
import Menu from "../../components/menu/menu";
import TopicList from "../../components/topiclist/topiclist";

// #region 书写注意
//
// 目前 typescript 版本还无法在装饰器模式下将 Props 注入到 Taro.Component 中的 props 属性
// 需要显示声明 connect 的参数类型并通过 interface 的方式指定 Taro.Component 子类的 props
// 这样才能完成类型检查和 IDE 的自动提示
// 使用函数模式则无此限制
// ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20796
//
// #endregion

type PageStateProps = {
  menu: {
    num: number
  }
}

type PageDispatchProps = {
  add: () => void
  dec: () => void
  asyncAdd: () => any
}

type PageOwnProps = {}

type PageState = {
  // 测试state
  showLoading: false,
  searchValue: ''
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Index {
  props: IProps;
}

// @ts-ignore
@connect(({ menu }) => ({
  menu
}), (dispatch) => ({
  asyncAdd () {
    // @ts-ignore
    dispatch(asyncAdd())
  }
}))
class Index extends Component<IProps, PageState>  {

  constructor(props) {
    super(props);
    this.state = {
      // @ts-ignore
      // eslint-disable-next-line react/no-unused-state
      showLoading: true,
      // eslint-disable-next-line react/no-unused-state
      searchValue: ""
    };
  }

  render () {
    return (
      <View className='index'>
        {
          // @ts-ignore
          <Menu />
        }
        {
          // @ts-ignore
          <TopicList />
        }
      </View>
    )
  }
}

export default Index

